<template>
  <div class="main">
    <mine-title>模型导入</mine-title>
    <div class="content">
      <div class="block-header">
        <div class="block-header-left">
          <mine-button type="primary" @click="addTask"><i class="iconfont icon-add-line"></i>新建任务</mine-button>
          <mine-button type="primary" secondary @click="loadData()"><i class="iconfont icon-reset-line"></i>刷新</mine-button>
          <mine-button @click="deleteTask" secondary :disabled="!multipleSelection.length"><i class="iconfont icon-delete-line"></i>删除</mine-button>
        </div>
        <div class="block-header-right"></div>
      </div>
      <el-table
        class="table"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        :max-height="300"
        ref="multipleTable">
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column label="任务名称" prop="name" show-overflow-tooltip>
          <template slot="header">
            <span>任务名称</span>
            <mine-table-search @searchSubmit="searchSubmit" name="name"></mine-table-search>
          </template>
        </el-table-column>
        <el-table-column label="任务描述" prop="descr" show-overflow-tooltip></el-table-column>
        <el-table-column label="任务状态" prop="status" show-overflow-tooltip>
          <template slot="header">
            <span>任务状态</span>
            <mine-table-screen @screenSubmit="screenSubmit" name="status" :list="statusList" isRadio></mine-table-screen>
          </template>
          <template slot-scope="scope">
            {{ $common.fetchSingleWord({ val: scope.row.status, dict: statusList }) }}
          </template>
        </el-table-column>
        <el-table-column label="接口URL" prop="api" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip sortable>
          <template slot-scope="scope">
            {{ $common.format(scope.row.createTime, 'yyyy-MM-dd', '--') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <mine-button type="text" @click="publish(scope.row)" v-if="[1, 3].includes(scope.row.status)">发布</mine-button>
            <mine-button type="text" @click="offline(scope.row)" v-if="[2].includes(scope.row.status)">下线</mine-button>
            <mine-button type="text" @click="test(scope.row)" v-if="[2].includes(scope.row.status)">测试</mine-button>
          </template>
        </el-table-column>
      </el-table>
      <mine-pagination
        @numberChange="numberChange"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage">
      </mine-pagination>
    </div>
  </div>
</template>
<script>
import { mappingMixins } from './mixins.js';
export default {
  mixins: [mappingMixins],
  data () {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      loading: false,
      multipleSelection: [],
      listQuery: {
        name: '',
        status: '',
      },
      rules: {},
    };
  },
  methods: {
    searchSubmit (value) {
      if (value.key === 'name') {
        this.listQuery.name = value.value;
      }
      this.loadData(true);
    },
    screenSubmit (value) {
      if (value.key === 'status') {
        this.listQuery.status = value.value;
      }
      this.loadData(true);
    },
    async loadData (flag) {
      if (flag) {
        this.currentPage = 1;
      }
      const params = {
        ...this.listQuery,
        page: this.currentPage,
        pageSize: this.pageSize,
        // creator: this.$store.getters.userName || '',
      };
      if (params.status === '') delete params.status;
      this.loading = true;
      try {
        const res = await this.$store.dispatch('proAdminImportModelTaskSearch', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data || {};
          this.tableData = data.list && data.list.length ? data.list : [];
          this.total = data.rowCount || 0;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    // 新增任务
    addTask () {
      this.$router.push('/moduleImport/addTask');
    },
    // 批量删除任务
    async deleteTask () {
      this.$mineConfirm('确认要删除这个任务', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const idList = this.multipleSelection.map(item => item.id);
        if (idList.length) {
          const params = idList;
          try {
            const res = await this.$store.dispatch('proAdminImportModelTaskBatchDelete', params);
            const result = res.data || {};
            if (result.success) {
              this.$message({ type: 'success', message: '删除成功' });
              this.loadData(false);
            } else {
              this.$message({ type: 'error', message: '删除失败' });
            }
          } catch (e) {
            console.error(e);
          }
        }
      }).catch(() => {});
    },
    // 发布
    async publish (val) {
      const params = {
        modelId: val.id
      };
      try {
        const res = await this.$store.dispatch('proAdminImportModelTaskPublishExternalModel', params);
        const result = res.data || {};
        if (result.success) {
          this.$message({ type: 'success', message: '发布成功' });
          this.loadData(false);
        } else {
          this.$message({ type: 'error', message: '发布失败' });
        }
      } catch (e) {
        console.error(e);
      }
    },
    // 下线
    async offline (val) {
      const params = {
        modelId: val.id
      };
      try {
        const res = await this.$store.dispatch('proAdminImportModelTaskOfflineExternalModel', params);
        const result = res.data || {};
        if (result.success) {
          this.$message({ type: 'success', message: '发布成功' });
          this.loadData(false);
        } else {
          this.$message({ type: 'error', message: '发布失败' });
        }
      } catch (e) {
        console.error(e);
      }
    },
    // 测试
    test (val) {
      this.$router.push({
        path: '/moduleImport/test',
        query: {
          id: val.id || ''
        }
      });
    },
    clear () {
      this.$refs.form.resetFields();
      this.loadData(true);
    },
    handleSelectionChange(selection){
      this.multipleSelection = selection;
    },
    numberChange (val) {
      switch (val.flag) {
        case 'pageSize':
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case 'currentPage':
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    }
  },
  mounted () {
    this.loadData(true)
  }
}
</script>
<style lang="less" scoped>
.demo-form-inline {
  margin-bottom: 22px;
  .el-form-item {
    margin-bottom: 0;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}

</style>
